<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { useSettingsStore } from '@/stores/settingsStore'

const settingsStore = useSettingsStore()

interface Level {
  value: number
  label: string
  description: string
}

const levels: Level[] = [
  { value: 0.75, label: '极速', description: '最低采样密度，适合大视图或性能受限设备' },
  { value: 1, label: '标准', description: '默认精度，性能与质量均衡' },
  { value: 1.6, label: '精细', description: '更细的采样，绝大多数锯齿都会消失' },
  { value: 2.4, label: '超精细', description: '最高精度，适合近距离查看复杂曲线' },
]

const findLevelIndex = (value: number) => {
  let idx = 0
  let minDiff = Number.POSITIVE_INFINITY
  levels.forEach((level, index) => {
    const diff = Math.abs(level.value - value)
    if (diff < minDiff) {
      minDiff = diff
      idx = index
    }
  })
  return idx
}

const pendingIndex = ref(findLevelIndex(settingsStore.samplingMultiplier))

watch(
  () => settingsStore.samplingMultiplier,
  (value) => {
    pendingIndex.value = findLevelIndex(value)
  },
)

const pendingLevel = computed<Level>(() => {
  const clampedIndex = Math.min(levels.length - 1, Math.max(0, pendingIndex.value))
  return levels[clampedIndex]!
})

function apply() {
  const level = pendingLevel.value
  if (!level) {
    return
  }
  settingsStore.setSamplingMultiplier(level.value)
}
</script>

<template>
  <section class="render-settings">
    <header class="settings-header">
      <h2 class="settings-title">渲染设置</h2>
      <p class="settings-subtitle">调节采样密度以控制曲线平滑度与性能。</p>
    </header>

    <div class="settings-body">
      <input
        class="settings-slider"
        type="range"
        min="0"
        :max="levels.length - 1"
        step="1"
        v-model.number="pendingIndex"
      />
      <div class="settings-level">
        <strong>{{ pendingLevel.label }}</strong>
        <span class="settings-desc">{{ pendingLevel.description }}</span>
      </div>
      <button class="settings-apply" type="button" @click="apply">应用设置</button>
    </div>
  </section>
</template>

<style scoped>
.render-settings {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 0.75rem;
}

.settings-header {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.settings-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
}

.settings-subtitle {
  margin: 0;
  font-size: 0.85rem;
  color: #94a3b8;
}

.settings-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.settings-slider {
  width: 100%;
}

.settings-level {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: #e2e8f0;
}

.settings-desc {
  color: #94a3b8;
}

.settings-apply {
  align-self: flex-end;
  border: none;
  border-radius: 0.6rem;
  padding: 0.45rem 0.9rem;
  background: rgba(56, 189, 248, 0.25);
  color: #38bdf8;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease;
}

.settings-apply:hover {
  background: rgba(56, 189, 248, 0.4);
  transform: translateY(-1px);
}
</style>
